import React, {Component} from 'react';
import {Grid, List} from 'antd-mobile'
import PropTypes from 'prop-types'

export default class HeaderSelector extends Component {
    static propTypes = {
        setHeader: PropTypes.func.isRequired
    };

    state = {
      icon: null         // 图片对象 默认没有值
    };

    constructor(props){
        super(props);
        // 准备需要显示的列表数据
        this.headerList = [];
        for(let i = 0; i<10; i++){
            this.headerList.push({
                text:(i+1),
                icon:require(`../../assets/images/${i+1}.png`)  // 不能使用import 使用模板字符串动态引入图片
            })
        }
    }

    handleClick = ({text, icon}) => {
        // 更新当前组件状态
        this.setState({
            icon
        });
        // 调用当前函数父组件状态
        this.props.setHeader(text)
    };

    render(){
        const listHeader = this.state.icon ? <div>已选择头像<img src={this.state.icon} style={{width:'30px'}}></img></div> : '请选择头像';
        return(
            <List renderHeader={() => listHeader}>
                {/*数据为对象数组 设置为5列*/}
                <Grid data={this.headerList} columnNum={5} onClick={this.handleClick}></Grid>
            </List>
        )
    }
}
